<template>
	<view class="two-classify e-flex e-flex-items-start">
		<view class="two-classify__left " :class="[type === 2 && 'bg-white']">
			<menu-card v-model="menuIndex" 
				:list="[{id:0,name:$t('common.全部'),key:Math.random()},...(list||[])]" :menuType="type === 1 ? 2 :3"
				label="name"></menu-card>
		</view>
		<view class="two-classify__right e-flex-1 " :class="[type === 1 && 'bg-white']">
			<GoodsListOne :params="requestParams" :refresherEnabled="!(!refresherEnabled&&menuIndex === 0)" @prev="handleSwitchPrev" @next="handleSwitchNext" v-if="type === 1" />
			<GoodsListTwo :params="requestParams" :refresherEnabled="!(!refresherEnabled&&menuIndex === 0)" @prev="handleSwitchPrev" @next="handleSwitchNext" v-else-if="type === 2" />
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		computed,
		watch,
	} from 'vue'
	import type {
		ClassifyItem
	} from '@/common/request/api'
	import GoodsListOne from './goods-list/one.vue'
	import GoodsListTwo from './goods-list/two.vue'

	const props = defineProps<{
		list : ClassifyItem[],
		classifyId : Number,
		type:Number,
		refresherEnabled:Boolean
	}>()
	
	const emit = defineEmits(['prev','next']);

	const menuIndex = ref(0)
	const requestParams = computed(() => {

		const value = menuIndex.value === 0 ? props.classifyId : props.list[menuIndex.value - 1]?.id
		return {
			// #ifndef PRIVATE
			categoryId: value,
			// #endif
			// #ifdef PRIVATE
			groupingId: value
			// #endif
		}
	})
	


	const init = () => {
		if (menuIndex.value !== 0) {
			menuIndex.value = 0
			// if (props.classifyId && props.list && props.list.length) {

			// 	handleRefresh()
			// } else {
			// 	goodsList.splice(0)
			// }
		}

	}
	watch(() => props.list, () => {
		init()
	}, {
		immediate: true
	})
	watch(() => props.classifyId, () => {
		menuIndex.value = 0
	})
	
	const handleSwitchPrev = () => {
		if(menuIndex.value > 0){
			menuIndex.value--
		}else{
			emit('prev')
		}
	}
	const handleSwitchNext = () => {
		if(menuIndex.value < props.list.length){
			menuIndex.value++
		}else{
			emit('next')
		}
	}
</script>

<style lang="scss" scoped>
	.two-classify {
		height: 100%;
		background-color: #f7f7f7;

		&__left {
			flex: 0 0 164rpx;
			height: 100%;
		}

		&__right {
			height: 100%;



			&-box {
				&--left {
					width: calc(50% + 14rpx);
					padding-right: 14rpx;
				}

				&--right {
					width: calc(50% - 14rpx);
				}
			}
		}
	}



</style>